<!--1 + 5画面 多屏监控 -->
<template>
  <div class="main-compent-1-J-5">
    <div class="flex-main-1-j-5" v-if="livePlayer=='jessibucaPro'">
      <div class = "flex-left1j5">
        <div class="flex-left1j5-big">
          <PlayerContainer  :id="playerPanels[0].id" :ref="playerPanels[0].ref"  :playParam="playParam" :playerRef="playerPanels[0].playerRef" :active="playerPanels[0].active" @on-select-active = "onSelectActive"></PlayerContainer>
        </div>
        <div class="flex-left1j5-bottom">
          <div class="flex-left1j5-bottom-box">
            <PlayerContainer  :id="playerPanels[1].id" :ref="playerPanels[1].ref"  :playParam="playParam" :playerRef="playerPanels[1].playerRef" :active="playerPanels[1].active" @on-select-active = "onSelectActive"></PlayerContainer>
          </div>
          <div class="flex-left1j5-bottom-box">
            <PlayerContainer  :id="playerPanels[2].id" :ref="playerPanels[2].ref" :playParam="playParam" :playerRef="playerPanels[2].playerRef" :active="playerPanels[2].active" @on-select-active = "onSelectActive"></PlayerContainer>
          </div>
        </div>

      </div>
      <div class="flex-1j5-right">
        <div class="flex-1j5-right-box">
          <PlayerContainer  :id="playerPanels[3].id" :ref="playerPanels[3].ref" :playParam="playParam" :playerRef="playerPanels[3].playerRef" :active="playerPanels[3].active" @on-select-active = "onSelectActive"></PlayerContainer>
        </div>
        <div class="flex-1j5-right-box">
          <PlayerContainer  :id="playerPanels[4].id" :ref="playerPanels[4].ref" :playParam="playParam" :playerRef="playerPanels[4].playerRef" :active="playerPanels[4].active" @on-select-active = "onSelectActive"></PlayerContainer>
        </div>
        <div class="flex-1j5-right-box">
          <PlayerContainer  :id="playerPanels[5].id" :ref="playerPanels[5].ref" :playParam="playParam" :playerRef="playerPanels[5].playerRef" :active="playerPanels[5].active" @on-select-active = "onSelectActive"></PlayerContainer>
        </div>
      </div>
    </div>
    <div class="flex-main-1-j-5" v-if="livePlayer=='ZlmRtcClient'">
      <div class = "flex-left1j5">
        <div class="flex-left1j5-big">
          <RtcWithTalkPlayer :id="playerPanels[0].id" :ref="playerPanels[0].ref" :active="playerPanels[0].active" :videoId = "playerPanels[0].playerRef"  @on-select-active = "onSelectActive"/>
        </div>
        <div class="flex-left1j5-bottom">
          <div class="flex-left1j5-bottom-box">
            <RtcWithTalkPlayer :id="playerPanels[1].id" :ref="playerPanels[1].ref" :active="playerPanels[1].active" :videoId = "playerPanels[1].playerRef"  @on-select-active = "onSelectActive"/>
          </div>
          <div class="flex-left1j5-bottom-box">
            <RtcWithTalkPlayer :id="playerPanels[2].id" :ref="playerPanels[2].ref" :active="playerPanels[2].active" :videoId = "playerPanels[2].playerRef"  @on-select-active = "onSelectActive"/>
          </div>
        </div>

      </div>
      <div class="flex-1j5-right">
        <div class="flex-1j5-right-box">
          <RtcWithTalkPlayer :id="playerPanels[3].id" :ref="playerPanels[3].ref" :active="playerPanels[3].active" :videoId = "playerPanels[3].playerRef"  @on-select-active = "onSelectActive"/>
        </div>
        <div class="flex-1j5-right-box">
          <RtcWithTalkPlayer :id="playerPanels[4].id" :ref="playerPanels[4].ref" :active="playerPanels[4].active" :videoId = "playerPanels[4].playerRef"  @on-select-active = "onSelectActive"/>
        </div>
        <div class="flex-1j5-right-box">
          <RtcWithTalkPlayer :id="playerPanels[5].id" :ref="playerPanels[5].ref" :active="playerPanels[5].active" :videoId = "playerPanels[5].playerRef"  @on-select-active = "onSelectActive"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PlayerContainer from "@/view/Home/Moudle/multiscreenplay/PlayerContainer";
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue';
import config from '@/config'
export default {
  name:"MultiScr1J5",
  components: {PlayerContainer,RtcWithTalkPlayer},
  data() {

    return {
      activeId:-1,
      deviceData:null,
      livePlayer: config.livePlayer(),
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox1J50',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J50",active:true},
        {id:1,ref:'playerBox1J51',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J51",active:false},
        {id:2,ref:'playerBox1J52',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J52",active:false},
        {id:3,ref:'playerBox1J53',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J53",active:false},
        {id:4,ref:'playerBox1J54',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J54",active:false},
        {id:5,ref:'playerBox1J55',style:'border:1px solid #14edc5',playerRef:"jsPLayer1J55",active:false},
      ],
      playParam:{
        protocol: "flv",
        pringLog:false,
        isDebug:false,
        isFlv:true,
        videoBuffer:0.2, //缓存时长
        videoBufferDelay:1,
        useMSE:true,//MediaSource
        useSIMD:false, //WASM(SIMD)
        useWCS:false, //Webcodec
        useSIMDMThreading:true,//启动多线程（WASM,WASM(SIMD)解码支持）
        showOperateBtns: true, // 显示网速
        forceNoOffscreen: true, //显示性能
        renderDom:"video",
        isUseWebGPU:'webgpu',//webgl
        demuxUseWorker:true,//硬解码(MediaSource，Webcodec)worker解封装
      }
    }
  },
  methods:{
    openDialog(data){
      this.deviceData = data;
      let player=null;
      if (this.activeId !== -1){
        //为何后面再加一个 [0], 还没搞懂
        player=this.$refs[this.playerPanels[this.activeId].ref];
        if (!player.isPlaying()){
          player.openDialog(
            data.arrt.deviceCode,
            data.arrt.channelCode,
            null,
            data.arrt.devName);
          return;
        }
      }else{
        // 没选中则一直向后找，哪个格子有空就播放
        for(let i in this.playerPanels){
          player = this.$refs[this.playerPanels[i].ref];
          /*          console.log(">>>>>>>>>>MultiScr2X2.play: i=%o; playerContainer=%o, isPlaying=%o, ref=%o", i,
                      playerContainer,playerContainer.isPlaying(),playerContainer.getRef())*/
          if (!player.isPlaying()){
            player.openDialog(
              data.arrt.deviceCode,
              data.arrt.channelCode,
              null,
              data.arrt.devName);
            return;
          }
        }
      }
    },

    play(videoUrl,deviceId,channelId){


      //选择可播放的 面板
      let playerContainer=null;
      if (this.activeId != -1){
        //为何后面再加一个 [0], 还没搞懂
        playerContainer=this.$refs[this.playerPanels[this.activeId].ref];
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId);
          return;
        }
      }

      // 没选中则一直向后找，哪个格子有空就播放
      for(let i in this.playerPanels){
        playerContainer = this.$refs[this.playerPanels[i].ref];
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId)
          return;
        }
      }
    },
    onSelectActive(active,index) {
      console.log("active=%o;index=%o",active,index);
      let player = null;
      if (active === false) {
        this.activeId = -1;
        for (let i in this.playerPanels) {
          player = this.$refs[this.playerPanels[i].ref];
          player.setActive(false);
        }
      } else {
        player = this.$refs[this.playerPanels[index].ref];
        //console.log(this.$refs[this.playerPanels[index].ref]);
        //console.log(this.$refs["playerBox1J50"]);
       // console.log(player);
        this.activeId = index;
        player.setActive(true);
        for (let i in this.playerPanels) {
          if (parseInt(i) !== index) {
            player = this.$refs[this.playerPanels[i].ref];
            player.setActive(false);
          }
        }
      }
    },
/*      console.log(">>>>>>>MultiScr1J5.onSelectActive: index=%o;active=%o",index,active);
      this.playerPanels[index].active = active;
      if (active){
        this.activeId=index;
        for(let i in this.playerPanels){
          if (parseInt(i) !== index){
            if (this.playerPanels[i].active !== false){
              this.playerPanels[i].active = false;
            }
          }
        }
      }else{
        this.activeId=-1;
      }
    },*/
  },
  mounted(){
    //console.log("Multi1J5.mounted()")
    this.$nextTick(()=>{
      let player = this.$refs[this.playerPanels[0].ref];

      //console.log(player);
      player.setActive(true);
    })
  }
}
</script>
<style lang="less">
.main-compent-1-J-5{
  width:100%;
  height:100%;

  .flex-main-1-j-5{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap: wrap;
    //background-color: #888;
    //border:1px solid #F00;
    /*左边*/
    .flex-left1j5{
      width: calc(100%/3*2);
      height:100%;
      //border:1px solid #0059ff;
      display: flex;
      flex-direction: column;

      .flex-left1j5-big{
        width:100%;
        height: calc(100%/3*2);
        //border: 1px solid #666;
      }

      .flex-left1j5-bottom{
        width: 100%;
        height: calc(100%/3);
        display: flex;
        .flex-left1j5-bottom-box{
          height: 100%;
          width: calc(100%/2);
          //border: 1px solid #84e8d7;
        }
      }
    };
    .flex-1j5-right{
      width: calc(100%/3);
      height:100%;
      display: flex;
      flex-direction: column;
      .flex-1j5-right-box{
        width: 100%;
        height: calc(100%/3);
        //border: 1px solid #84e8d7;
      }

    }
  }

}

</style>
